import React from 'react'
import {Form, Card, Input, Button, InputNumber, Table} from 'antd'
import {FormattedMessage} from 'react-intl'
import moment from 'moment'
import OperationProgramsModal from './operation-programs-modal'

const {TextArea} = Input
const FormItem = Form.Item

export const Management = (props) => {
  const columns = [{
    title: <FormattedMessage id='编号' />,
    dataIndex: 'number'
  }, {
    title: 'ID',
    dataIndex: 'id'
  }, {
    title: <FormattedMessage id='姓名' />,
    dataIndex: 'name',
    render: (text) => {
      return text === '用户不存在' ? <span style={{color: '#FF0000'}}>{text}</span> : text
    }
  }, {
    title: <FormattedMessage id='所在训练营' />,
    dataIndex: 'programs',
    render: (programs = []) => {
      return <span>{programs.map(program => program.id).join(',')}</span>
    }
  }, {
    title: <FormattedMessage id='用户名' />,
    dataIndex: 'username'
  }, {
    title: <FormattedMessage id='手机号' />,
    dataIndex: 'mobilePhone'
  }, {
    title: <FormattedMessage id='邮箱' />,
    dataIndex: 'email'
  }, {
    title: <FormattedMessage id='创建时间' />,
    dataIndex: 'createDate',
    render: (time) => {
      return <span>{moment(time).format('YYYY-MM-DD')}</span>
    }
  }, {
    title: <FormattedMessage id='操作' />,
    dataIndex: 'actions',
    render: (text, user) => {
      const {
        isOperationProgramVisible,
        openOperationProgramModal,
        closeOperationProgramModal,
        removeProgram,
        currentOpeningUserModalId
      } = props

      return <div>
        <a onClick={openOperationProgramModal.bind(this, user.id)}><FormattedMessage id='移除该训练营' /></a>
        <OperationProgramsModal
          user={user}
          isOperationProgramVisible={isOperationProgramVisible && currentOpeningUserModalId === user.id}
          handleCancel={closeOperationProgramModal}
          removeProgram={removeProgram}
      />
      </div>
    }
  }]

  const data = []
  const {programManagement, programName, title, usernameOrEmail} = props
  const users = programManagement.users || []

  usernameOrEmail.forEach((element, key) => {
    const user = users.find(user => user.username === element.toString() || user.email === element.toString())
    if (user) {
      data.push(Object.assign({}, user, {key, number: key + 1}))
    } else {
      data.push({key, number: key + 1, name: <FormattedMessage id='用户不存在' />})
    }
  })

  return (
    <div>
      <Card title={title}>
        <Form>
          <FormItem label={<FormattedMessage id='username 或者 email,每行写一个' />}>
            <TextArea
              autosize={{minRows: 2, maxRows: 10}}
              onChange={props.handleUsernameChange.bind(this)}
            />
          </FormItem>
          <Button
            type='primary'
            onClick={props.handleSearchClick.bind(this)}>
            <FormattedMessage id='查询' />
          </Button>
          <FormItem label={<FormattedMessage id='添加详情' />}>
            <div>
              <Table columns={columns} dataSource={data} size='middle' pagination={false} />
            </div>
          </FormItem>
          <FormItem label={<FormattedMessage id='添加到' />}>
            <InputNumber
              onChange={props.handleProgramIdChange.bind(this)} />
            <div><FormattedMessage id='特训营名称' />:{programName || <FormattedMessage id='该特训营不存在' />}</div>
          </FormItem>
          <Button
            type='primary'
            onClick={props.handleAddClick.bind(this)}>
            <FormattedMessage id='添加' />
          </Button>
          <FormItem label={<FormattedMessage id='添加详情' />}>
            <div><FormattedMessage id='已添加如下用户' />{`:${JSON.stringify(programManagement.addedUsers)}`}</div>
          </FormItem>
        </Form>
      </Card>
    </div>
  )
}
